<script setup lang="ts">
import { reactive } from 'vue'
import icon_collection_outlined from '@/assets/svg/icon_collection_outlined.svg'
import visualStar from '@/assets/svg/visual-star.svg'
import icon_replace_outlined from '@/assets/svg/icon_replace_outlined.svg'
import { initCanvasDataMobile } from '@/utils/canvasUtils'
import { ref, nextTick, onBeforeMount } from 'vue'
import { useRoute, useRouter } from 'vue-router_2'
import { storeApi, storeStatusApi } from '@/api/visualization/dataVisualization'
import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import VanSticky from 'vant/es/sticky'
import VanNavBar from 'vant/es/nav-bar'
import 'vant/es/nav-bar/style'
import 'vant/es/sticky/style'
import { downloadCanvas2 } from '@/utils/imgUtils'
import { useEmitt } from '@/hooks/web/useEmitt'
import CanvasOptBar from '@/components/visualization/CanvasOptBar.vue'
const dvMainStore = dvMainStoreWithOut()
const state = reactive({
  canvasDataPreview: null,
  canvasStylePreview: null,
  canvasViewInfoPreview: null,
  dvInfo: {
    name: '',
    id: ''
  },
  curPreviewGap: 0
})
const dataInitState = ref(true)
const dashboardPreview = ref(null)
const previewCanvasContainer = ref(null)
const downloadStatus = ref(false)

const loadCanvasData = (dvId, weight?) => {
  dataInitState.value = false
  initCanvasDataMobile(
    dvId,
    'dashboard',
    function ({
      canvasDataResult,
      canvasStyleResult,
      dvInfo,
      canvasViewInfoPreview,
      curPreviewGap
    }) {
      dvInfo['weight'] = weight
      state.canvasDataPreview = canvasDataResult
      state.canvasStylePreview = canvasStyleResult
      state.canvasViewInfoPreview = canvasViewInfoPreview
      state.dvInfo = dvInfo
      state.curPreviewGap = curPreviewGap
      dataInitState.value = true
      nextTick(() => {
        storeQuery()
        dashboardPreview.value.restore()
      })
    }
  )
}

const route = useRoute()
const router = useRouter()
let fromPage, cache
onBeforeMount(() => {
  dvMainStore.setMobileInPc(true)
  dvMainStore.setInMobile(true)
  const dvId = route.query.dvId as unknown as string
  fromPage = route.query.from as unknown as string
  cache = route.query.cache as unknown as string
  loadCanvasData(dvId)
  useEmitt({
    name: 'canvasDownload',
    callback: function () {
      downloadH2('img')
    }
  })
})

const downloadH2 = type => {
  downloadStatus.value = true
  nextTick(() => {
    const vueDom = previewCanvasContainer.value.querySelector('.canvas-container')
    downloadCanvas2(type, vueDom, state.dvInfo.name, () => {
      downloadStatus.value = false
    })
  })
}

const onClickLeft = () => {
  router.replace({
    path: '/index',
    query: {
      from: fromPage,
      cache: cache
    }
  })
}
const reload = () => {
  window.location.reload()
}
const favorited = ref(false)
const executeStore = () => {
  const param = {
    id: state.dvInfo.id,
    type: 'panel'
  }
  storeApi(param).then(() => {
    storeQuery()
  })
}
const storeQuery = () => {
  if (!state.dvInfo?.id) return
  storeStatusApi(state.dvInfo.id).then(res => {
    favorited.value = res.data
  })
}
</script>

<template>
  <div class="dv-common-layout-mobile" ref="previewCanvasContainer">
    <van-sticky>
      <van-nav-bar :title="state.dvInfo.name" left-arrow @click-left="onClickLeft" />
    </van-sticky>
    <div class="top-nav_refresh">
      <el-icon
        size="16"
        @click="executeStore"
        :style="{ color: favorited ? '#FFC60A' : '#646A73' }"
      >
        <icon
          ><component
            class="svg-icon"
            :is="favorited ? visualStar : icon_collection_outlined"
          ></component
        ></icon>
      </el-icon>
      <el-icon style="margin-left: 16px" @click="reload" color="#646A73" size="16"
        ><icon_replace_outlined
      /></el-icon>
    </div>
    <canvas-opt-bar
      style="top: 48px"
      canvas-id="canvas-main"
      :canvas-style-data="state.canvasStylePreview || {}"
      :component-data="state.canvasDataPreview || []"
    ></canvas-opt-bar>
    <de-preview
      ref="dashboardPreview"
      v-if="state.canvasStylePreview && dataInitState"
      :dv-info="state.dvInfo"
      :cur-gap="state.curPreviewGap"
      :component-data="state.canvasDataPreview"
      :canvas-style-data="state.canvasStylePreview"
      :canvas-view-info="state.canvasViewInfoPreview"
      :download-status="downloadStatus"
      :show-linkage-button="false"
    ></de-preview>
  </div>
</template>

<style lang="less">
.dv-common-layout-mobile {
  height: 100vh;
  width: 100vw;
  overflow-y: auto;
  --van-nav-bar-height: 44px;
  --van-nav-bar-arrow-size: 20px;
  --van-nav-bar-icon-color: #1f2329;
  --van-nav-bar-title-text-color: #1f2329;
  --van-font-bold: 500;
  --van-nav-bar-title-font-size: 17px;

  .top-nav_refresh {
    position: absolute;
    top: 14px;
    right: 24px;
    z-index: 10;
    display: flex;
    align-items: center;
  }
  #preview-canvas-main {
    height: calc(100% - 44px) !important;
  }
}
</style>
